<!-- Cards for overview monitoring section -->
<div ng-show="showConfig">
    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
        <div class="euiFlexItem euiFlexItem--flexGrowZero">
            <h2 class="euiTitle euiTitle--medium">
                <md-button class="md-icon-button md-icon-button-back wz-padding-right-16 btn btn-info" aria-label="Back"
                    tooltip="Go back" tooltip-placement="bottom" ng-click="goBack()"><i class="fa fa-fw fa-arrow-left"
                        aria-hidden="true"></i></md-button>
                Overview
            </h2>
        </div>
    </div>

    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
        <!-- Overview visualization card -->
        <div class="euiPanel euiFlexItem euiFlexItem--flexGrowZero" style="min-width: 500px">
            <md-card-content class="wazuh-column"
                ng-class="{'no-opacity-overview-monitoring': resultState !== 'ready' || !rendered}">
                <span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Top 5
                    nodes</span>
                    <react-component style="height: 100%;"name="KibanaVisualization" props="{visId: 'Wazuh-App-Cluster-monitoring-Overview-Node-Pie', tab: 'monitoring'}"></react-component>
                <span class="wz-padding-top-10 wz-text-center" ng-show="!rendered">There are no results for selected
                    time
                    range. Try another one.</span>
            </md-card-content>
        </div>
        <!-- Cluster configuration card -->
        <div class="euiFlexItem">
            <div class="euiPanel euiPanel--paddingMedium">
                <span class="euiTitle euiTitle--small euiCard__title">Configuration</span>
                <div class="euiSpacer euiSpacer--m"></div>
                <!-- Configuration options -->
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Disabled</span>
                    <span class="color-grey">{{configuration.disabled}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Hidden</span>
                    <span class="color-grey">{{configuration.hidden}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Name</span>
                    <span class="color-grey">{{configuration.name}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Node name</span>
                    <span class="color-grey">{{configuration.node_name}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Node type</span>
                    <span class="color-grey">{{configuration.node_type}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Bind address</span>
                    <span class="color-grey">{{configuration.bind_addr}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">IP</span>
                    <span class="color-grey">{{configuration.nodes[0] || '-'}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="25">Port</span>
                    <span class="color-grey">{{configuration.port}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End cards for overview monitoring section -->